<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <!-- <FormItem prop="userName">
      <Input v-model="form.userName" placeholder="请输入用户名">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem> -->
    <FormItem prop="yunyName">
      <Input v-model="form.yunyName" placeholder="请输入用户名">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>

    <FormItem prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>

    <!--<FormItem class="phoneVerification" prop="code">
      <div class="phoneVerificationCode">
        <Input v-model="form.code" placeholder="请输入验证码"></Input>
        <i-button class="phoneVerficationImage" v-text="validateCodeWord" @click='getCode' :disabled='disableButton' >获取验证码</i-button>
      </div>
    </FormItem>-->

    <FormItem>
      <Button @click="handleSubmit" type="primary" long>登录</Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  name: 'LoginForm',
  props: {
    // userNameRules: {
    //   type: Array,
    //   default: () => {
    //     return [
    //       { required: true, message: '账号不能为空', trigger: 'blur' }
    //     ]
    //   }
    // },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    },
    yunyNameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      form: {
        // userName: '',
        password: '',
        yunyName: '',
        code: '',
        v: '',
        k1: ''
      },
      disableButton: false,
      validateCodeNum: '300', // 倒计时时间
      validateCodeWord: '发送验证码',
      mark: true
    }
  },
  computed: {
    rules () {
      return {
        // userName: this.userNameRules,
        password: this.passwordRules,
        yunyName: this.yunyNameRules,
        code: this.code
      }
    }
  },
  methods: {
    handleSubmit () {
      let that = this;
      if (this.mark) {
        this.mark = false
        localStorage.setItem('name', this.form.yunyName)
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.$emit('on-success-valid', {
              // userName: this.form.userName,
              password: this.form.password,
              yunyName: this.form.yunyName
              // code: this.form.code
            })
          }
        })
        setTimeout(function () {
          that.mark = true
        }, 2000)
      }
    },
    getCode () {
      if (!this.form.yunyName) {
        this.$Message.info('请输入用户名')
      }
      // 获取凭证
      this.axios.get('admin/account/admin/credentials').then(res => {
        this.v = res.data.data.v
        this.k1 = res.data.data.k
        let param = this.qs.stringify({
          'validateType': 'admin.' + this.form.yunyName
        })
        // 获取验证码
        this.axios.post('validate/code', param, {
          headers: {
            'deviceId': this.k1
          }
        }).then(res => {
          localStorage.k1 = this.k1
          if (res.data.code == 200) {
            // this.$Message.info(res.data.msg);
            this.validateCodeWord = this.validateCodeNum
            this.validateCodeNum = '300'
            setInterval(this.countDown, 1000)
            this.disableButton = true
          } else {
            // 防止重复点击
            this.disableButton = false
          }
          this.$Message.info(res.data.msg)
        })
      })
    },
    // 倒计时
    countDown () {
      if (this.validateCodeNum != '0') {
        this.validateCodeNum--
        this.validateCodeWord = this.validateCodeNum
      } else {
        this.validateCodeWord = '发送验证码'
        clearInterval(this.countDown)
        // 防止重复点击
        this.disableButton = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.phoneVerification {
      .phoneVerificationCode {
        display: flex;
        .phoneVerficationImage {
          background-color: #2d8cf0;
          width: 55%;
          height: 32px;
          margin-left: 10px;
          color: white;
          text-align: center;
          cursor: pointer;
        }
      }
    }
</style>
